<template>
  <el-dialog
    v-model="dialog"
    title="广告新增"
    width="500"
    :before-close="reset"
  >
    <div>
      <el-form
        :model="formData"
        label-position="right"
        label-width="100px"
        ref="ruleForm"
        :rules="rules"
        :mode="ruleModel"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="formData.title"
            autocomplete="off"
            style="width: 220px"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="广告位置" prop="position">
          <el-select
            v-model="formData.position"
            placeholder="Please select a zone"
            style="width: 220px"
          >
            <el-option
              :label="item.value"
              :value="item.key"
              v-for="item of positionType"
              :key="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标地址" prop="targetUrl">
          <el-input
            v-model="formData.targetUrl"
            autocomplete="off"
            placeholder="超链接地址"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio value="0">正常</el-radio>
            <el-radio value="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片" prop="imgUrl">
          <el-upload
            action="#"
            list-type="picture-card"
            :limit="1"
            ref="upload"
            :before-upload="onBeforeUpload"
          >
            <img v-if="fileData.url" :src="fileData.url" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from "vue";
import { Plus } from "@element-plus/icons-vue";


const dialog = ref(false);
const ruleForm = ref();
const formData = ref({
  title: "",
  position: 0,
  status: "0",
  targetUrl: "",
  imgUrl: "",
});
const loading = ref(false);
const emits = defineEmits(["upload"]);

const rules = ref({
  title: [{ required: true, message: "广告标题", trigger: "blur" }],
  position: [{ required: true, message: "广告位置不能为空", trigger: "blur" }],
  targetUrl: [{ required: true, message: "目标地址不能为空", trigger: "blur" }],
  imgUrl: [{ required: true, message: "广告图片不能为空", trigger: "blur" }],
});

const ruleModel = ref({
  title: "",
  position: 0,
  targetUrl: "",
  imgUrl: "",
});

const fileData = ref({
  url: "",
  file: null,
});

const positionType = [
  {
    key: 0,
    value: "弹窗",
  },
  {
    key: 1,
    value: "首页顶部",
  },
  {
    key: 2,
    value: "首页底部",
  },
  {
    key: 3,
    value: "分类顶部",
  },
  {
    key: 4,
    value: "分类底部",
  },
  {
    key: 5,
    value: "用户中心顶部",
  },
  {
    key: 6,
    value: "用户中心底部",
  },
];

const onBeforeUpload = (file) => {
  fileData.value.url = URL.createObjectURL(file);
  fileData.value.file = file;
  formData.value.imgUrl = fileData.value.url;
  return false;
};

const onSubmit = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      emits("upload", fileData.value.file, formData.value);
      setTimeout(() => {
        reset();
        loading.value = false;
      }, 1000);
    }
  });
};

const reset = () => {
  formData.value = {
    title: "",
    position: 0,
    status: "0",
    targetUrl: "",
    imgUrl: "",
  };

  dialog.value = false;
  loading.value = false;
};

const open = () => {
  dialog.value = true;
};
defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.avatar {
  width: 140px;
  height: 140px;
}
</style>
